<template>
    <div class="page communicatServerList" data-page="communicatServerList" style="z-index: 2;">
        <div class="navbar moreUnitList">
            <div class="navbar-inner">
                <div class="left" @click=$root.backToTab(0)>
                    <a class="link">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title" style="left: 10px;;">通信服务器实时监测</div>
                <div class="right">
                    <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-demo">
                        <i class="icon f7-icons ios-only">search_strong</i>
                        <i class="icon material-icons md-only">search</i>
                    </a>
                </div>
                <form data-search-container=".search-list" data-search-in=".item-title" class="custum searchbar searchbar-expandable searchbar-demo searchbar-init">
                    <div class="searchbar-inner">
                        <div class="searchbar-input-wrap">
                            <input type="search" placeholder="搜索"  style="color: white">
                            <i class="searchbar-icon"></i>
                            <span class="input-clear-button"></span>
                        </div>
                        <span class="searchbar-disable-button">Cancel</span>
                    </div>
                </form>
            </div>
        </div>

        <div class="page-content">
            <div class="toplisttext">
                <div class="text_one">在线</div>
                <div class="text_two" id="onlineNum"></div>
                <div class="text_thr">离线</div>
                <div class="text_fur" id="offlineNum"></div>
            </div>
            <div class="searchbar-backdrop"></div>
            <div class="list simple-list searchbar-not-found unitStat-no-list">
                <ul>
                    <li>无相关信息</li>
                </ul>
            </div>
            <div class="list media-list search-list searchbar-found serverContent" style="margin-top: 10px;margin-bottom: 0px">
                <ul>

                </ul>
            </div>
        </div>
    </div>
</template>

<style>

    .toplisttext{
        height: 40px;
        position: relative;
    }
    .text_one{
        position: absolute;
        top: 8px;
        left: 16px;
    }
    .text_two{
        position: absolute;
        left: 48px;
        top: 10px;
        color: #4075fb;
        font-size: 12px;
    }
    .text_thr{
        position: absolute;
        left: 109px;
        top: 8px;
    }
    .text_fur{
        position: absolute;
        left: 143px;
        top: 10px;
        color: #65b8e4;
        font-size: 12px;
    }
   .imgicon{
       width: 34px;
       margin-top: 3px;
   }
   .left_line{
       margin-left: -13px;
   }
    .company_name{
        font-size: 15px;

    }
    .company_address{
        padding-top: 3px;
        font-size: 13px;
    }
    .company_alarms{
        position: absolute;
        right: 16px;
        color: #999999;
        font-size: 19px;
        top: 20px;
    }


</style>

<script>
    return {

        mounted() {
            var self = this;
            self.getServerInfoData();
        },

        methods: {
            getServerInfoData:function () {
                var self = this;
                var $ = self.$$;
                common.loading(1);
                Dao.getUitbStatusCount({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    organizationId:userInfor.organizationIds,
                }, function (data) {
                    common.loading(0);
                    $("#onlineNum").append(
                        common.transNullundefined(data.online.toString())
                    )
                    $("#offlineNum").append(
                        common.transNullundefined(data.offline.toString())
                    )

                    $(".serverContent ul").empty();
                    for (var i = 0; i < data.details.length; i++) {
                        var onlintext='';
                        var imageline='';
                        if(data.details[i].isOnline==0){
                            onlintext="离线";
                            imageline=staticPath +"img/home/communicationServer_offline.png";
                        }else{
                            onlintext='';
                            imageline=staticPath +"img/home/communicationServer_online.png";
                        }
                        $(".serverContent ul").append(
                            `<li>
                            <a href="/communicatServerDetail/`+data.details[i].serverId+`/" class="item-content" data-view=".view-main">
                            <div class="item-media">
                            <img src="`+imageline+`" class="imgicon">
                            </div>
                            <div class="item-inner"> <div class="item-title left_line">
                            <div class="company_name ">`+data.details[i].organizationName+`</div>
                            <div class="company_address ">`+data.details[i].name+`</div>
                            </div>
                            <div class="company_alarms">`+onlintext+`</div>
                            </div>
                            </a>
                            </li>`);

                    }
                }, false);
            }
        },
        on: {

        }
    }

</script>